eslint-plugin-import のimport/order
を有効にすることで、import
ブロックの並びがバラバラな時に基準に沿って並び替えてくれます。
準備
まずはインストールして、
yarn add -D eslint-plugin-import
以下の2行を.eslintrc
などの設定ファイルのextends
セクションへ追加します。
{
"extends": [
"...",
"plugin:import/errors",
"plugin:import/warnings"
]
}
これでimport
系のrules
が使えるようになり、また以下のルールが有効に設定されました。
{
"rules": {
"import/no-named-as-default": [1],
"import/no-named-as-default-member": [1],
"import/no-duplicates": [1],
"import/no-unresolved": [2],
"import/named": [2],
"import/namespace": [2],
"import/default": [2],
"import/export": [2],
"...": "..."
}
}
これではまだ整頓されません。
import/order を有効にする
整頓されるようにするにはimport/order
ルールを自分で設定する必要があります。それには以下のような1行をrules
セクションに追加します。
{
"...": "...",
"rules": {
"import/order": ["error"],
}
}